<!DOCTYPE html>
<html>
<head>
    <title>Test auth0</title>
</head>
<body>
    <h2>Login with Social Connection</h2>
    <a href="#login" class='login-google'>login with google</a>
    <br>
    <a href="#login-popup" class='login-google-popup'>login with google on popup</a><br>
    <a href="#login-popup-all-connections" class='login-popup'>login with popup</a>

    <hr>
    <h2>Login with Database Connection</h2>
    <input class="login-username" value="johnfoo@gmail.com" />
    <input type="password" class="login-password" value="1234" />
    <input type="button" class="login-db" value="login" />

    <hr>
    <h2>Signup Database Connection</h2>
    <input class="signup-username" value="johnfoo@gmail.com" />
    <input type="password" class="signup-password" value="1234" />
    <input type="button" class="signup-db" value="signup" />

    <hr>
    <h2>Validate User in Database Connection</h2>
    <input class="validate-username" value="johnfoo@gmail.com" />
    <input type="password" class="validate-password" value="1234" />
    <input type="button" class="validate-db" value="validate" />

    <hr>
    <h2>Passwordless authentication with SMS</h2>
    <input class="phone-input" value="" placeholder="phone number" />
    <input type="button" class="request-sms-code" value="request code" />
    <br>
    <input class="sms-code-input" value="" placeholder="sms passcode" />
    <input type="button" class="submit-sms-code" value="submit code" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="auth0.js"></script>
    <script type="text/javascript">
        var auth0 = new Auth0({
            domain:      'mdocs.auth0.com',
            callbackURL: 'http://localhost:3000/',
            clientID:    '0HP71GSd6PuoRYJ3DXKdiXCUUdGmBbup',
            callbackOnLocationHash: true
        });

        // callback redirect?
        var result = auth0.parseHash(window.location.hash);
        if (result && result.id_token) {
            // This will execute on redirect callback
            auth0.getProfile(result.id_token, function (err, profile) {
              window.location.hash = "";
              if (err) {
                return alert('error fetching profile: ' + JSON.stringify(err));
              }
                alert('hello ' + profile.name);
            });
        } else if (result && result.error) {
          alert('error at login: ' + result.error)
        }

        $('.login-google').click(function (e) {
            e.preventDefault();
            auth0.login({
                connection: 'google-oauth2'
            }, function(err) {
                if (err) alert("something went wrong: " + err.message);
            });
        });

        $('.login-google-popup').click(function (e) {
            e.preventDefault();
            auth0.login({
                connection: 'google-oauth2',
                popup: true,
                popupOptions: {
                    width: 450,
                    height: 600
                }
            }, function(err, profile, id_token, access_token, state) {
                if (err) {
                    alert("something went wrong: " + (err.message || err.error));
                    return;
                }
                alert('hello ' + profile.name);
            });
        });

        $('.login-popup').click(function (e) {
            e.preventDefault();
            auth0.login({
                popup: true,
                popupOptions: {
                    width: 450,
                    height: 800,
                    location: 'no',
                    toolbar: 'no'
                }
            }, function(err, profile, id_token, access_token, state) {
                if (err) {
                    alert("something went wrong: " + (err.message || err.error));
                    return;
                }
                alert('hello ' + profile.name);
            });
        });

        $('.login-db').click(function (e) {
            e.preventDefault();
            auth0.login({
                connection: 'tests',
                username: $('.login-username').val(),
                password: $('.login-password').val(),
                sso: false
            }, function (err, profile, id_token, access_token) {
                if (err) return alert('Something went wrong: ' + err.message);
                alert('hello ' + profile.name);
            });
        });

        $('.validate-db').click(function (e) {
            e.preventDefault();
            auth0.validateUser({
                connection: 'tests',
                username: $('.validate-username').val(),
                password: $('.validate-password').val()
            }, function (err, profile, id_token, access_token) {
                if (err) return alert('Something went wrong: ' + err.message);
                if (profile) return alert('User exists and password is correct!');
                return alert('User not found or incorrect password.');
            });
        });

        $('.signup-db').click(function (e) {
            e.preventDefault();
            auth0.signup({
                connection: 'tests',
                username: $('.signup-username').val(),
                password: $('.signup-password').val(),
                sso: false
            }, function (err, profile, id_token, access_token) {
                if (err) return alert('Something went wrong: ' + err.message);
                alert('hello ' + profile.name);
            });
        });

        $('.request-sms-code').click(function (e) {
            e.preventDefault();
            auth0.requestSMSCode({
                apiToken: 'your-api-token-here',
                phoneNumber: $('.phone-input').val()
            }, function (err, result) {
                if (err) return alert("something went wrong: " + err.message);
                console.log(result);
            });
        });

        $('.submit-sms-code').click(function (e) {
            e.preventDefault();
            auth0.loginWithResourceOwner({
                username: $('.phone-input').val(),
                password: $('.sms-code-input').val(),
                connection: 'sms'
            }, function (err, profile, id_token, access_token, state, refresh_token) {
                if (err) return alert("something went wrong: " + err.message);
                console.log(profile, id_token, access_token, state, refresh_token);
            });
        });
    </script>
</body>
</html>
